<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css常用属性</title>
    <style>
        /* 颜色的设置 */
        h1{
            /* 1.单词 */
            color: red;
            /* 2.16进制表示法 */
            color: #f00;
            /* 3.rgb表示法【单位要统一】 范围（0～255）（0%～100%）*/
            color: rgb(255, 0, 0);
            color: rgb(100%, 0%, 0%);
            /* 4.rgba：透明度范围（0～1） */
            color: rgba(255, 0, 0, 0.5);
        }

        /* 长度单位 */
        #div1{
            background-color: blue;
            width: 300px;
            /* 像素：px */
            height: 300px;
            /* % */
            width: 50%;
            /* lem = 父元素的字体大小 */
            width: 10em;
            /* 1rem = 根元素（html）的字体大小 */
            width: 10rem;

            /* vw/wh:浏览器窗口的宽/高（0～100） */
            /* vh/wh的宽高与浏览器窗口有关 */
            width: 50vw;

            /* 
            标准盒模型:宽高设置在content区域;
            盒模型（从内往外的顺序）
            content（蓝色）： 元素的内容区域所占据的空间
            1.若没有特意设置宽高，则在content区域的大小由内容撑开
            2.若设置了宽高，则在【标准盒模型】的情况下，content的区域的大小就是设置的值
            padding（绿色）：设置content区域和外层的距离的
            border（黄色）：
            margin（橙色）：将其他元素从自己身边推开

            怪异盒模型：宽高设置在border区域
            */
            
            /* padding四种写法 但也可以拆开只写一边eg：padding-top */
            padding: 20px;
            /* 上下左右 */
            padding: 20px 30px;
            /* 上下 左右 */
            padding: 20px 30px 40px;
            /* 上 左右 下 */
            padding: 20px 30px 40px 50px;
            /* 上 右 左 下（顺时针） */

            /* border是一个复合属性；能复合着写就不分开写；若复合和单独都写了，要把单独的写在复合的下边，为了避免默认值覆盖的问题 */
            /* border同样四种写法 */
            /* border style：solid */
            border: 10px solid;
            border-color: aquamarine;

            margin: 30px;

            /* 
            标准盒模型:宽高设置在content区域;
            怪异盒模型：宽高设置在border区域*/
            box-sizing: border-box;
            /* 背景颜色默认填充到border区域 */


            overflow: hidden;

            /* 文字系列 */
            font-size: 12px;
            color: yellow;
            font-style: italic;
            font-weight: bold;
            font-family: 'Courier New', Courier, monospace;



            /* 文本相关 */
            /* 文本装饰 */
            text-decoration: underline;
            text-decoration: none;
            /* 文本对齐方式 */
            text-align: center;
            text-indent: 2em;
            /* 行高 */
            line-height: 20px;
            
        }
        /* 无序号 */
        li{
            list-style: none;
        }

        #div2{
            width: 200px;
            height: 200px;
            background-color: bisque;
            padding: 30px;
            box-sizing: border-box;

            /* 内切圆 */
            border-radius: 10px;
            /* 整个周围一个圆 */
            border-radius: 50%;
        }

        #div3{
            width: 500px;
            height: 500px;
            background-color: antiquewhite;
            background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F21%2F20200321232846_ixpsr.thumb.1000_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657802649&t=655bd82e32e2b4afa6929b1eb0d96b6c);
            background-repeat: no-repeat;
            background-position: center;
            /* background-size是不能集成到background属性中写的 */
            background-size: 500px;
            /* 等比例缩放 */
            background-size: contain;
            background-size: cover;

            padding: 30px;
            border: 50px solid;
        }

    </style>
</head>
<body>
    <h1>Lorem ipsum dolor sit, amet consectetur adipisicing elit. </h1>
    <div id="div1">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero temporibus, perferendis alias necessitatibus obcaecati ullam? Aspernatur qui molestiae perferendis, magni deserunt recusandae unde eveniet placeat exercitationem, commodi iste, repellendus perspiciatis.</div>
    <div id="div2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. </div>
    <div id="div3"></div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

    
</body>
</html>